<template>
    <div class="layoutTabBox">
        <a-tabs v-model:activeKey="activeKey" >
            <a-tab-pane v-for="(tab,index) in tabList" :key="index+1" :tab="tab.config.name">
                <!--暂时写死高度-->
                <div style="height:300px;">
                    <component :ref="tab.config.alias" v-bind:is="tab.forname+'View'" :config="tab.config"></component>
                </div>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
import FormView from "../components/FormView/FormView.vue";
import ListView from "../components/ListView/ListView.vue";
import TreeView from "../components/TreeView/TreeView.vue";
import {cloneDeep} from 'lodash-es';

export default {
    name: "LayoutTab",
    components: {
        FormView,
        ListView,
        TreeView
    },
    props: {
        tabs:{}
    },
    data() {
        return {
            activeKey:1,
            tabList:[],
        }
    },
    created() {
        this.tabList=cloneDeep(this.tabs);
    },
    methods: {},
    watch: {},
}
</script>

<style scoped>
.layoutTabBox{
    height: 100%;
    width: 100%;
    background: #fff;
    border: 1px solid #dadde0;
}
.layoutTabBox >>> .ant-tabs-bar{
    background: #fafafa;
    height: 32px;
    border-bottom: 1px solid #dadde0;
}
.layoutTabBox >>> .ant-tabs-nav .ant-tabs-tab{
    padding: 6px 0px;
}
.layoutTabBox >>> .ant-tabs-tabpane{
    height: 100%;
    position: relative;
}
</style>
